<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置对象</title>
    <style>
        .ok{
            color : green;
            border : 1px solid green;
        }
        .error{
            color: red;
            border : 1px solid red;
        }
    </style>
    <script>
        function check_code(){
            var text = document.getElementById("code");
            var span = document.getElementById("code_msg");

            var code = text.value;
            var reg = /^\w{6,12}$/;
            if(reg.test(code)){
                span.className = "ok";
                return true;
            }else{
                span.className = "error";
                return false;
            }
        }

        function check_pwd(){
            var password = document.getElementById("pwd");
            var span = document.getElementById("pwd_msg");

            var pwd = password.value;
            var reg = /^\w{8,20}$/;
            if(reg.test(pwd)){
                span.className = "ok";
                return true;
            }else{
                span.className = "error";
                return false;
            }
        }
    </script>
</head>
<body>
    <!-- 
        onsubmit,表单提交事件
        在表单提交时触发
        该事件可以取消，当此事件中的js返回false是，此提交事件被取消
     -->
    <form action="www.baidu.com" onsubmit="return check_code() + check_pwd() == 2">
        <p>
            账号: <input type="text" id="code" onblur="check_code()">
            <span id="code_msg">6 - 12位 字母、数字、下划线</span>
        </p >
        <p>
            账号: <input type="password" id="pwd" onblur="check_pwd()">
            <span id="pwd_msg">8 - 20位 字母、数字、下划线</span>
        </p >
        <p>
            <input type="submit" value="登录">
        </p >
    </form>
</body>